<!DOCTYPE html><html lang="zh" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover"><title>审陌 | 审陌</title><meta name="author" content="审陌"><meta name="copyright" content="审陌"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="UNIAPP常见问题总结一、自定义顶部导航1、在pages.json中，给对应的页面设置自定义导航栏样式 12345678&amp;#123;      &quot;path&quot;: &quot;pages&#x2F;index&#x2F;index&quot;,      &quot;style&quot;: &amp;#123;        &quot;navigationStyle&quot;: &quot;custo">
<meta property="og:type" content="website">
<meta property="og:title" content="审陌">
<meta property="og:url" content="https://gitee.com/trial-street/shenmo.git/img/UNIAPP%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E6%80%BB%E7%BB%93.html">
<meta property="og:site_name" content="审陌">
<meta property="og:description" content="UNIAPP常见问题总结一、自定义顶部导航1、在pages.json中，给对应的页面设置自定义导航栏样式 12345678&amp;#123;      &quot;path&quot;: &quot;pages&#x2F;index&#x2F;index&quot;,      &quot;style&quot;: &amp;#123;        &quot;navigationStyle&quot;: &quot;custo">
<meta property="og:locale">
<meta property="og:image" content="https://cdn.staticaly.com/gh/liangshenglei/pic_bed@master/img/default_cover_2.webp">
<meta property="article:published_time" content="2023-10-20T05:44:36.655Z">
<meta property="article:modified_time" content="2023-10-20T05:44:36.655Z">
<meta property="article:author" content="审陌">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://cdn.staticaly.com/gh/liangshenglei/pic_bed@master/img/default_cover_2.webp"><link rel="shortcut icon" href="/shenmo/img/favicon.png"><link rel="canonical" href="https://gitee.com/trial-street/shenmo.git/img/UNIAPP%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E6%80%BB%E7%BB%93.html"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/shenmo/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = {
  root: '/shenmo/',
  algolia: undefined,
  localSearch: {"path":"/shenmo/search.xml","preload":false,"top_n_per_article":1,"unescape":false,"languages":{"hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found"}},
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: 'Copy Successful',
    error: 'Copy Error',
    noSupport: 'Browser Not Supported'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  dateSuffix: {
    just: 'Just now',
    min: 'minutes ago',
    hour: 'hours ago',
    day: 'days ago',
    month: 'months ago'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  infinitegrid: {
    js: 'https://cdn.jsdelivr.net/npm/@egjs/infinitegrid/dist/infinitegrid.min.js',
    buttonText: 'Load More'
  },
  isPhotoFigcaption: false,
  islazyload: false,
  isAnchor: false,
  percent: {
    toc: true,
    rightside: false,
  },
  autoDarkmode: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: '审陌',
  isPost: false,
  isHome: false,
  isHighlightShrink: false,
  isToc: false,
  postUpdate: '2023-10-20 13:44:36'
}</script><script>(win=>{
      win.saveToLocal = {
        set: (key, value, ttl) => {
          if (ttl === 0) return
          const now = Date.now()
          const expiry = now + ttl * 86400000
          const item = {
            value,
            expiry
          }
          localStorage.setItem(key, JSON.stringify(item))
        },
      
        get: key => {
          const itemStr = localStorage.getItem(key)
      
          if (!itemStr) {
            return undefined
          }
          const item = JSON.parse(itemStr)
          const now = Date.now()
      
          if (now > item.expiry) {
            localStorage.removeItem(key)
            return undefined
          }
          return item.value
        }
      }
    
      win.getScript = (url, attr = {}) => new Promise((resolve, reject) => {
        const script = document.createElement('script')
        script.src = url
        script.async = true
        script.onerror = reject
        script.onload = script.onreadystatechange = function() {
          const loadState = this.readyState
          if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
          script.onload = script.onreadystatechange = null
          resolve()
        }

        Object.keys(attr).forEach(key => {
          script.setAttribute(key, attr[key])
        })

        document.head.appendChild(script)
      })
    
      win.getCSS = (url, id = false) => new Promise((resolve, reject) => {
        const link = document.createElement('link')
        link.rel = 'stylesheet'
        link.href = url
        if (id) link.id = id
        link.onerror = reject
        link.onload = link.onreadystatechange = function() {
          const loadState = this.readyState
          if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
          link.onload = link.onreadystatechange = null
          resolve()
        }
        document.head.appendChild(link)
      })
    
      win.activateDarkMode = () => {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = () => {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
        if (t === 'dark') activateDarkMode()
        else if (t === 'light') activateLightMode()
      
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
      const detectApple = () => {
        if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
          document.documentElement.classList.add('apple')
        }
      }
      detectApple()
    })(window)</script><meta name="generator" content="Hexo 6.2.0"><link rel="alternate" href="/shenmo/atom.xml" title="审陌" type="application/atom+xml">
</head><body><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="/shenmo/img/fluid.png" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/shenmo/archives/"><div class="headline">Articles</div><div class="length-num">19</div></a><a href="/shenmo/tags/"><div class="headline">Tags</div><div class="length-num">19</div></a><a href="/shenmo/categories/"><div class="headline">Categories</div><div class="length-num">17</div></a></div><hr class="custom-hr"/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/shenmo/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/shenmo/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/shenmo/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/shenmo/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 个人</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/shenmo/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/shenmo/movies/"><i class="fa-fw fas fa-video"></i><span> 视频</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/shenmo/link/"><i class="fa-fw fas fa-link"></i><span> 友情链接</span></a></div><div class="menus_item"><a class="site-page" href="/shenmo/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page fixed" id="page-header" style="background-image: url('/shenmo/img/default.png')"><nav id="nav"><span id="blog-info"><a href="/shenmo/" title="审陌"><span class="site-name">审陌</span></a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search" href="javascript:void(0);"><i class="fas fa-search fa-fw"></i><span> Search</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/shenmo/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/shenmo/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/shenmo/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/shenmo/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 个人</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/shenmo/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/shenmo/movies/"><i class="fa-fw fas fa-video"></i><span> 视频</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/shenmo/link/"><i class="fa-fw fas fa-link"></i><span> 友情链接</span></a></div><div class="menus_item"><a class="site-page" href="/shenmo/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div><div id="toggle-menu"><a class="site-page" href="javascript:void(0);"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">审陌</h1></div></header><main class="layout" id="content-inner"><div id="page"><div id="article-container"><h1 id="UNIAPP常见问题总结"><a href="#UNIAPP常见问题总结" class="headerlink" title="UNIAPP常见问题总结"></a>UNIAPP常见问题总结</h1><h2 id="一、自定义顶部导航"><a href="#一、自定义顶部导航" class="headerlink" title="一、自定义顶部导航"></a>一、自定义顶部导航</h2><p>1、在pages.json中，给对应的页面设置自定义导航栏样式</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">      &quot;path&quot;: &quot;pages/index/index&quot;,</span><br><span class="line">      &quot;style&quot;: &#123;</span><br><span class="line">        &quot;navigationStyle&quot;: &quot;custom&quot;,</span><br><span class="line">        &quot;navigationBarTextStyle&quot;: &quot;white&quot;,</span><br><span class="line">         &quot;navigationBarTitleText&quot;: &quot;首页&quot;,</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br></pre></td></tr></table></figure>

<p>2、定义自定义组件customNavbar,在组件中获取屏幕边界到安全区域的距离</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;view class=&quot;navbar&quot; :style=&quot;&#123;paddingTop:safeAreaInsets.top+&#x27;px&#x27;&#125;&quot;&gt;</span><br><span class="line">	&lt;view class=&quot;logo&quot;&gt;</span><br><span class="line">		&lt;image src=&quot;../../static/c1.png&quot; mode=&quot;&quot;&gt;&lt;/image&gt;</span><br><span class="line">		&lt;text&gt;头部导航&lt;/text&gt;</span><br><span class="line">	&lt;/view&gt;</span><br><span class="line">  &gt;</span><br><span class="line">  &lt;view&gt;</span><br><span class="line">  	&lt;text class=&quot;icon-search&quot;&gt;搜索&lt;/text&gt;</span><br><span class="line">	&lt;text class=&quot;icon-scan&quot;&gt;&lt;/text&gt;</span><br><span class="line">  &lt;/view&gt;</span><br><span class="line">  &lt;/view&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script lang=&quot;ts&quot; setup&gt;</span><br><span class="line">const &#123;safeAreaInsets&#125; = uni.getSystemInfoAsync()   //获取设备基本信息</span><br><span class="line"></span><br><span class="line">console.log(safeAreaInsets)</span><br><span class="line"></span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p>注意: uni.getSystemInfoAsync()在不同的设备环境不定时出现不兼容问题，谨慎使用</p>
<p>设备信息参数</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line">SDKVersion: &quot;&quot;</span><br><span class="line">appId: &quot;__UNI__EEA8FAD&quot;</span><br><span class="line">appLanguage: &quot;zh-Hans&quot;</span><br><span class="line">appName: &quot;CHAT&quot;</span><br><span class="line">appVersion: &quot;1.0.0&quot;</span><br><span class="line">appVersionCode: &quot;100&quot;</span><br><span class="line">brand: undefined</span><br><span class="line">browserName: &quot;edge&quot;</span><br><span class="line">browserVersion: &quot;117.0.0.0&quot;</span><br><span class="line">deviceBrand: undefined</span><br><span class="line">deviceId: &quot;16968447295758332217&quot;</span><br><span class="line">deviceModel: &quot;iPhone&quot;</span><br><span class="line">deviceOrientation: &quot;portrait&quot;</span><br><span class="line">devicePixelRatio: 3</span><br><span class="line">deviceType: &quot;phone&quot;</span><br><span class="line">fontSizeSetting: undefined</span><br><span class="line">hostFontSizeSetting: undefined</span><br><span class="line">hostLanguage: &quot;zh-CN&quot;</span><br><span class="line">hostName: &quot;edge&quot;</span><br><span class="line">hostPackageName: undefined</span><br><span class="line">hostSDKVersion: undefined</span><br><span class="line">hostTheme: &quot;light&quot;</span><br><span class="line">hostVersion: &quot;117.0.0.0&quot;</span><br><span class="line">language: &quot;zh-CN&quot;</span><br><span class="line">model: &quot;iPhone&quot;</span><br><span class="line">osLanguage: undefined</span><br><span class="line">osName: &quot;ios&quot;</span><br><span class="line">osTheme: undefined</span><br><span class="line">osVersion: &quot;13.2.3&quot;</span><br><span class="line">pixelRatio: 3</span><br><span class="line">platform: &quot;ios&quot;</span><br><span class="line">safeArea: Object</span><br><span class="line">safeAreaInsets: Object</span><br><span class="line">screenHeight: 736</span><br><span class="line">screenWidth: 414</span><br><span class="line">statusBarHeight: 0</span><br><span class="line">system: &quot;iOS 13.2.3&quot;</span><br><span class="line">ua: &quot;Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1 Edg/117.0.0.0&quot;</span><br><span class="line">uniCompileVersion: &quot;3.8.12&quot;</span><br><span class="line">uniPlatform: &quot;web&quot;</span><br><span class="line">uniRuntimeVersion: &quot;3.8.12&quot;</span><br><span class="line">version: &quot;&quot;</span><br><span class="line">windowBottom: 50</span><br><span class="line">windowHeight: 686</span><br><span class="line">windowTop: 0</span><br><span class="line">windowWidth: 414</span><br></pre></td></tr></table></figure>

<h2 id="二、修改导航栏内容"><a href="#二、修改导航栏内容" class="headerlink" title="二、修改导航栏内容"></a>二、修改导航栏内容</h2><p>修改文字内容</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">uni.setNavigationBarTitle(&#123;</span><br><span class="line">	 //这是修改后的导航栏文字</span><br><span class="line">	title: &quot;首页&quot;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>修改文字颜色以及导航栏背景色</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">uni.setNavigationBarColor(&#123;</span><br><span class="line">	frontColor: &quot;#ffffff&quot;, //文字颜色</span><br><span class="line">	backgroundColor: &quot;#007AFF&quot; //底部背景色</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h2 id="三、外链跳转无法返回"><a href="#三、外链跳转无法返回" class="headerlink" title="三、外链跳转无法返回"></a>三、外链跳转无法返回</h2><p>原因：外链访问，并不是页面跳转，因此，基于app自带返回无法进行返回操作</p>
<p>解决：新建页面，让跳转外链在新页面中展示，具体操作如下：</p>
<p>1、新建页面webview</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;view class=&quot;container&quot;&gt;</span><br><span class="line">    &lt;web-view :src=&quot;externalUrl&quot;&gt;&lt;/web-view&gt;</span><br><span class="line">  &lt;/view&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"> </span><br><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">  data() &#123;</span><br><span class="line">    return &#123;</span><br><span class="line">      externalUrl: &#x27;&#x27;</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">  onLoad() &#123;</span><br><span class="line">    this.externalUrl = this.$route.query.url;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"> </span><br><span class="line">&lt;style scoped&gt;</span><br><span class="line">.container &#123;</span><br><span class="line">  width: 100%;</span><br><span class="line">  height: 100vh;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>

<p>注：<code>web-view</code> 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面</p>
<p>2、页面跳转</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">uni.navigateTo(&#123;</span><br><span class="line">  url: &#x27;/pages/webview/webview?url=https://www.example.com&#x27;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h2 id="四、图片点击放大"><a href="#四、图片点击放大" class="headerlink" title="四、图片点击放大"></a>四、图片点击放大</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">//预览图片</span><br><span class="line">uni.previewImage(options)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">//案例说明</span><br><span class="line">uni.previewImage(&#123;</span><br><span class="line">		indicator: &quot;number&quot;,</span><br><span class="line">		loop: true,</span><br><span class="line">		urls: [e]                //需要预览的图片链接列表，必填，数组类型</span><br><span class="line">	&#125;)</span><br></pre></td></tr></table></figure>

<h2 id="五、获取元素位置信息"><a href="#五、获取元素位置信息" class="headerlink" title="五、获取元素位置信息"></a>五、获取元素位置信息</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">const query = uni.createSelectorQuery().in(this);</span><br><span class="line">query.select(&#x27;#id&#x27;).boundingClientRect(data =&gt; &#123;</span><br><span class="line">  console.log(&quot;得到布局位置信息&quot; + JSON.stringify(data));</span><br><span class="line">  console.log(&quot;节点离页面顶部的距离为&quot; + data.top);</span><br><span class="line">&#125;).exec();</span><br></pre></td></tr></table></figure>

<p>执行结果</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">bottom: 1135</span><br><span class="line">dataset: &#123;&#125;</span><br><span class="line">height: 1135</span><br><span class="line">id:&quot;scro&quot;</span><br><span class="line">left: 11</span><br><span class="line">right: 403</span><br><span class="line">top: 0</span><br><span class="line">width: 392</span><br></pre></td></tr></table></figure>

<h2 id="六、版本更新"><a href="#六、版本更新" class="headerlink" title="六、版本更新"></a>六、版本更新</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&quot;&lt;uses-permission android:name=\&quot;android.permission.INSTALL_PACKAGES\&quot;/&gt;&quot;,</span><br><span class="line">&quot;&lt;uses-permission android:name=\&quot;android.permission.REQUEST_INSTALL_PACKAGES\&quot;/&gt;&quot;,</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&quot;minSdkVersion&quot; : &quot;14&quot;,</span><br><span class="line">&quot;targetSdkVersion&quot; : &quot;26&quot;</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">const downloadTask = uni.downloadFile(&#123;</span><br><span class="line">					url: this.downURL,</span><br><span class="line">					success(res) &#123;</span><br><span class="line">						console.log(&#x27;下载成功：&#x27;,res);</span><br><span class="line">						if(res.statusCode == 200) &#123;</span><br><span class="line">							plus.runtime.install(res.tempFilePath,()=&gt;&#123;</span><br><span class="line">								console.log(&#x27;安装成功！&#x27;);</span><br><span class="line">							&#125;)</span><br><span class="line">						&#125;</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;)</span><br><span class="line">				downloadTask.onProgressUpdate((res)=&gt; &#123;</span><br><span class="line">					this.uploadData.count = res.progress</span><br><span class="line">					this.uploadData.allCount = res.totalBytesExpectedToWrite</span><br><span class="line">					this.uploadData.counted = res.totalBytesWritten</span><br><span class="line">					</span><br><span class="line">					console.log(&#x27;下载进度&#x27; + res.progress);</span><br><span class="line">						console.log(&#x27;已经下载的数据长度&#x27; + res.totalBytesWritten);</span><br><span class="line">						console.log(&#x27;预期需要下载的数据总长度&#x27; + res.totalBytesExpectedToWrite);</span><br><span class="line">				&#125;)</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">plus.downloader.createDownload(url,&#123;&#125;,call)    //原生下载</span><br></pre></td></tr></table></figure>

<h2 id="七、不同设备不同样式"><a href="#七、不同设备不同样式" class="headerlink" title="七、不同设备不同样式"></a>七、不同设备不同样式</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">写法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾</span><br><span class="line">#ifndef H5                                //除了 H5 平台，其它平台均存在的代码</span><br><span class="line">#ifdef H5 || MP-WEIXIN                    //在 H5 平台或微信小程序平台存在的代码</span><br><span class="line">#ifdef H5                                 //仅出现在 H5 平台下的代码</span><br></pre></td></tr></table></figure>

<p>场景使用：</p>
<p>CSS</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">/*  #ifdef  APP-PLUS  */                               //仅app适用</span><br><span class="line">width: 60upx;</span><br><span class="line">height: 60upx;</span><br><span class="line">/*  #endif  */</span><br></pre></td></tr></table></figure>

<p>HTML</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;!--  #ifdef  APP-PLUS --&gt;                 //仅app适用</span><br><span class="line">平台特有的组件</span><br><span class="line">&lt;!--  #endif --&gt;</span><br></pre></td></tr></table></figure>



<p>JS</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">change() &#123;</span><br><span class="line">	// #ifdef APP-PLUS                          //仅app适用</span><br><span class="line">	statusbarHeight = plus.navigator.getStatusbarHeight()</span><br><span class="line">	// #endif</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>%PLATFORM% 代表各平台名称，可取值如下：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">VUE3	uni-app js引擎版用于区分vue2和3，详情	HBuilderX 3.2.0+</span><br><span class="line">UNI-APP-X	用于区分是否是uni-app x项目 详情	HBuilderX 3.9.0+</span><br><span class="line">uniVersion	用于区分编译器的版本 详情	HBuilderX 3.9.0+</span><br><span class="line">APP	App	</span><br><span class="line">APP-PLUS	uni-app js引擎版编译为App时	</span><br><span class="line">APP-PLUS-NVUE或APP-NVUE	App nvue 页面	</span><br><span class="line">APP-ANDROID	App Android 平台 详情	</span><br><span class="line">APP-IOS	App iOS 平台 详情	</span><br><span class="line">H5	H5（推荐使用 WEB）	</span><br><span class="line">WEB	web（同H5）	HBuilderX 3.6.3+</span><br><span class="line">MP-WEIXIN	微信小程序	</span><br><span class="line">MP-ALIPAY	支付宝小程序	</span><br><span class="line">MP-BAIDU	百度小程序	</span><br><span class="line">MP-TOUTIAO	抖音小程序	</span><br><span class="line">MP-LARK	飞书小程序	</span><br><span class="line">MP-QQ	QQ小程序	</span><br><span class="line">MP-KUAISHOU	快手小程序	</span><br><span class="line">MP-JD	京东小程序	</span><br><span class="line">MP-360	360小程序	</span><br><span class="line">MP	微信小程序/支付宝小程序/百度小程序/抖音小程序/飞书小程序/QQ小程序/360小程序	</span><br><span class="line">QUICKAPP-WEBVIEW	快应用通用(包含联盟、华为)	</span><br><span class="line">QUICKAPP-WEBVIEW-UNION	快应用联盟	</span><br><span class="line">QUICKAPP-WEBVIEW-HUAWEI	快应用华为</span><br></pre></td></tr></table></figure>



</div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="/shenmo/img/fluid.png" onerror="this.onerror=null;this.src='/shenmo/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">审陌</div><div class="author-info__description"></div></div><div class="card-info-data site-data is-center"><a href="/shenmo/archives/"><div class="headline">Articles</div><div class="length-num">19</div></a><a href="/shenmo/tags/"><div class="headline">Tags</div><div class="length-num">19</div></a><a href="/shenmo/categories/"><div class="headline">Categories</div><div class="length-num">17</div></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>Announcement</span></div><div class="announcement_content">This is my Blog</div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>Recent Post</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/shenmo/2023/10/30/flySearch/" title="ButterFly 主题"><img src="/shenmo/img/butterfly.png" onerror="this.onerror=null;this.src='/shenmo/img/404.jpg'" alt="ButterFly 主题"/></a><div class="content"><a class="title" href="/shenmo/2023/10/30/flySearch/" title="ButterFly 主题">ButterFly 主题</a><time datetime="2023-10-30T13:24:00.000Z" title="Created 2023-10-30 21:24:00">2023-10-30</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/shenmo/2023/10/27/css/" title="CSS 案例合集"><img src="/shenmo/img/css.png" onerror="this.onerror=null;this.src='/shenmo/img/404.jpg'" alt="CSS 案例合集"/></a><div class="content"><a class="title" href="/shenmo/2023/10/27/css/" title="CSS 案例合集">CSS 案例合集</a><time datetime="2023-10-27T13:24:00.000Z" title="Created 2023-10-27 21:24:00">2023-10-27</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/shenmo/2023/10/27/echarts/" title="Echarts"><img src="/shenmo/img/echarts.png" onerror="this.onerror=null;this.src='/shenmo/img/404.jpg'" alt="Echarts"/></a><div class="content"><a class="title" href="/shenmo/2023/10/27/echarts/" title="Echarts">Echarts</a><time datetime="2023-10-27T13:24:00.000Z" title="Created 2023-10-27 21:24:00">2023-10-27</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/shenmo/2023/10/27/js/" title="JS API合集"><img src="/shenmo/img/js.png" onerror="this.onerror=null;this.src='/shenmo/img/404.jpg'" alt="JS API合集"/></a><div class="content"><a class="title" href="/shenmo/2023/10/27/js/" title="JS API合集">JS API合集</a><time datetime="2023-10-27T13:24:00.000Z" title="Created 2023-10-27 21:24:00">2023-10-27</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/shenmo/2023/10/27/vue3count/" title="vue3 问题合集"><img src="/shenmo/img/vue3.png" onerror="this.onerror=null;this.src='/shenmo/img/404.jpg'" alt="vue3 问题合集"/></a><div class="content"><a class="title" href="/shenmo/2023/10/27/vue3count/" title="vue3 问题合集">vue3 问题合集</a><time datetime="2023-10-27T13:24:00.000Z" title="Created 2023-10-27 21:24:00">2023-10-27</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
            <i class="fas fa-folder-open"></i>
            <span>Categories</span>
            <a class="card-more-btn" href="/shenmo/categories/" title="View More">
    <i class="fas fa-angle-right"></i></a>
            </div>
            <ul class="card-category-list" id="aside-cat-list">
            <li class="card-category-list-item "><a class="card-category-list-link" href="/shenmo/categories/ButterFly/"><span class="card-category-list-name">ButterFly</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/shenmo/categories/CSS/"><span class="card-category-list-name">CSS</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/shenmo/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">3</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/shenmo/categories/ElementPlus/"><span class="card-category-list-name">ElementPlus</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/shenmo/categories/Git/"><span class="card-category-list-name">Git</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/shenmo/categories/Gitee/"><span class="card-category-list-name">Gitee</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/shenmo/categories/Gitee/Hexo/"><span class="card-category-list-name">Hexo</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/shenmo/categories/HEXO/"><span class="card-category-list-name">HEXO</span><span class="card-category-list-count">1</span></a></li>
            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>Tags</span></div><div class="card-tag-cloud"><a href="/shenmo/tags/SQL/" style="font-size: 1.1em; color: #999">SQL</a> <a href="/shenmo/tags/ButterFly/" style="font-size: 1.1em; color: #999">ButterFly</a> <a href="/shenmo/tags/Hexo/" style="font-size: 1.1em; color: #999">Hexo</a> <a href="/shenmo/tags/for-in/" style="font-size: 1.1em; color: #999">for in</a> <a href="/shenmo/tags/HEXO/" style="font-size: 1.1em; color: #999">HEXO</a> <a href="/shenmo/tags/%E9%98%B2%E7%81%AB%E5%A2%99/" style="font-size: 1.1em; color: #999">防火墙</a> <a href="/shenmo/tags/%E5%9B%BE%E5%BA%8A/" style="font-size: 1.1em; color: #999">图床</a> <a href="/shenmo/tags/VUE3/" style="font-size: 1.5em; color: #99a9bf">VUE3</a> <a href="/shenmo/tags/Git/" style="font-size: 1.1em; color: #999">Git</a> <a href="/shenmo/tags/ElementPlus/" style="font-size: 1.1em; color: #999">ElementPlus</a> <a href="/shenmo/tags/VUE/" style="font-size: 1.1em; color: #999">VUE</a> <a href="/shenmo/tags/JS/" style="font-size: 1.1em; color: #999">JS</a> <a href="/shenmo/tags/Gitee/" style="font-size: 1.1em; color: #999">Gitee</a> <a href="/shenmo/tags/HTML/" style="font-size: 1.1em; color: #999">HTML</a> <a href="/shenmo/tags/UNIAPP/" style="font-size: 1.1em; color: #999">UNIAPP</a> <a href="/shenmo/tags/Echarts/" style="font-size: 1.1em; color: #999">Echarts</a> <a href="/shenmo/tags/for-of/" style="font-size: 1.1em; color: #999">for of</a> <a href="/shenmo/tags/CSS/" style="font-size: 1.1em; color: #999">CSS</a> <a href="/shenmo/tags/%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9F/" style="font-size: 1.1em; color: #999">管理系统</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>Archives</span></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/shenmo/archives/2023/10/"><span class="card-archive-list-date">October 2023</span><span class="card-archive-list-count">9</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/shenmo/archives/2023/02/"><span class="card-archive-list-date">February 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/shenmo/archives/2022/12/"><span class="card-archive-list-date">December 2022</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/shenmo/archives/2022/10/"><span class="card-archive-list-date">October 2022</span><span class="card-archive-list-count">3</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/shenmo/archives/2022/08/"><span class="card-archive-list-date">August 2022</span><span class="card-archive-list-count">4</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/shenmo/archives/2022/07/"><span class="card-archive-list-date">July 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>Info</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">Article :</div><div class="item-count">19</div></div><div class="webinfo-item"><div class="item-name">UV :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">PV :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">Last Update :</div><div class="item-count" id="last-push-date" data-lastPushDate="2023-10-30T13:37:56.135Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2023 By 审陌</div><div class="framework-info"><span>Framework </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>Theme </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="Toggle Between Light And Dark Mode"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="Toggle between Single-column and Double-column"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside-config" type="button" title="Setting"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="Back To Top"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/shenmo/js/utils.js"></script><script src="/shenmo/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.umd.min.js"></script><div class="js-pjax"></div><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">Search</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  Loading the Database</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="Search for Posts" type="text"/></div></div><hr/><div id="local-search-results"></div><div id="local-search-stats-wrap"></div></div></div><div id="search-mask"></div><script src="/shenmo/js/search/local-search.js"></script></div></div></body></html>